<template>
  <div class="dashboard-container">
    <!-- 头部 -->

    <span class="text1"> 只有疯狂到认为自己能改变世界的人,才能真正的改变世界。</span>
    <div>
      <!-- //center -->
      <el-row :gutter="40" class="center">
        <el-col :span="6">
          <el-card shadow="always" class="card1">
            <div style="display:flex;padding: 0px;margin:0px">
              <div style="flex:1;"><svg t="1656161052335" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="6906" width="48" height="48">
                  <path
                    d="M384.753921 577.211211c0 51.586912-15.172561 93.453439-33.873482 93.453439-18.714224 0-33.876552-41.86755-33.876552-93.453439 0-51.615565 15.162328-93.453439 33.876552-93.453439C369.58136 483.756749 384.753921 525.595646 384.753921 577.211211z"
                    p-id="6907" fill="#1296db"></path>
                  <path
                    d="M702.469006 577.211211c0 51.586912-15.162328 93.453439-33.863249 93.453439-18.714224 0-33.873482-41.86755-33.873482-93.453439 0-51.615565 15.159258-93.453439 33.873482-93.453439C687.306678 483.756749 702.469006 525.595646 702.469006 577.211211z"
                    p-id="6908" fill="#1296db"></path>
                  <path
                    d="M508.555551 123.996059c-212.869179 0-385.462049 172.543751-385.462049 385.465119 0 212.869179 172.593893 385.462049 385.462049 385.462049 212.894761 0 385.478422-172.593893 385.478422-385.462049C894.033973 296.53981 721.450313 123.996059 508.555551 123.996059zM508.555551 850.542436c-188.381461 0-341.081259-152.711054-341.081259-341.081259 0-13.956873 1.089821-27.655873 2.718925-41.147142 45.071522-22.472827 140.589992-80.473823 163.512051-176.468131 0 0 197.732433 231.698013 509.033435 148.941194 4.541433 22.165836 6.92676 45.150316 6.92676 68.674079C849.665463 697.831382 696.952362 850.542436 508.555551 850.542436z"
                    p-id="6909" fill="#1296db"></path>
                </svg></div>
              <div style="flex:1;line-height: 24px;" class="pepleattr">
                <div>管理员总数</div>
                <div>{{ PageData.adminUserCount }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="always" class="card1">
            <div style="display:flex;padding: 0px;margin:0px">
              <div style="flex:1;">
                <svg t="1656161441074" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="8606" width="48" height="48">
                  <path
                    d="M865.92 536.106667l-170.88-37.333334c54.4-27.733333 91.733333-84.48 91.733333-149.333333v-74.666667C786.773333 182.186667 711.04 106.666667 618.666667 106.666667c-77.44 0-142.933333 53.333333-162.133334 125.013333l-0.64 2.56c-0.853333 3.626667-1.706667 7.04-2.346666 10.666667-0.426667 2.133333-0.64 4.053333-0.853334 6.186666-0.426667 2.773333-0.853333 5.333333-1.066666 8.106667-0.426667 5.12-0.853333 10.24-0.853334 15.36v74.666667c0 7.04 0.64 14.08 1.493334 20.906666 0.213333 2.56 0.853333 4.906667 1.28 7.466667 0.853333 4.266667 1.706667 8.32 2.773333 12.586667 0.64 2.986667 1.493333 5.76 2.346667 8.746666a169.237333 169.237333 0 0 0 84.053333 99.84l-15.36 3.413334-155.306667 33.92a111.957333 111.957333 0 0 0-88.746666 109.653333v132.906667c0 41.173333 33.493333 74.666667 74.666666 74.666666h522.666667c41.173333 0 74.666667-33.493333 74.666667-74.666666v-133.12c-0.64-52.906667-37.76-98.773333-89.386667-109.44z"
                    p-id="8607" fill="#22c958"></path>
                  <path
                    d="M415.146667 461.013333c-18.346667-33.493333-28.586667-71.68-28.586667-111.573333v-74.666667c0-37.333333 8.96-72.32 24.746667-103.68A136.746667 136.746667 0 0 0 341.333333 151.68c-76.373333 0-138.666667 62.293333-138.666666 138.666667v61.653333c0 53.546667 30.72 100.266667 75.733333 123.306667l-141.013333 30.72c-42.666667 8.96-73.386667 46.72-73.386667 90.453333v109.866667C64 740.48 91.52 768 125.653333 768h93.013334v-122.453333c0-82.773333 58.666667-155.306667 139.093333-172.16l57.386667-12.373334z"
                    p-id="8608" fill="#22c958"></path>
                </svg>
              </div>
              <div style="flex:1;line-height: 24px;" class="pepleattr">
                <div>注册用户</div>
                <div>{{ PageData.regUserCount }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="always" class="card1">
            <div style="display:flex;padding: 0px;margin:0px">
              <div style="flex:1;">
                <svg t="1656161581657" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="9796" width="48" height="48">
                  <path
                    d="M600.76158 68.191078 245.714238 68.191078c-49.040926 0-88.317465 39.720653-88.317465 88.76158l-0.444115 710.09366c0 49.040926 39.277562 88.76158 88.317465 88.76158l533.014616 0c49.040926 0 88.76158-39.720653 88.76158-88.76158L867.046319 334.476841 600.76158 68.191078zM689.523159 778.284739 334.475817 778.284739l0-88.76158 355.047342 0L689.523159 778.284739zM689.523159 600.76158 334.475817 600.76158l0-88.76158 355.047342 0L689.523159 600.76158zM556.38079 378.857631 556.38079 134.762263 800.475134 378.857631 556.38079 378.857631z"
                    p-id="9797" fill="#d81e06"></path>
                </svg>
              </div>
              <div style="flex:1;line-height: 24px;" class="pepleattr">
                <div>文档总数</div>
                <div>{{ PageData.contentCount }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="always" class="card1">
            <div style="display:flex;padding: 0px;margin:0px">
              <div style="flex:1;">
                <svg t="1656161654637" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="10849" width="48" height="48">
                  <path
                    d="M677.38624 895.367168c6.36928 8.501248 4.2496 19.80416-3.5328 26.161152-8.491008 6.356992-19.802112 1.765376-26.157056-6.025216L566.390784 804.864 243.283968 804.864c-37.462016 0-73.619456-13.09696-98.36544-37.107712C120.877056 743.008256 102.4 711.548928 102.4 674.791424L102.4 274.630656c0-37.484544 18.477056-74.969088 42.51648-99.715072C169.664512 150.874112 205.821952 131.072 243.283968 131.072l519.655424 0c36.755456 0 71.245824 19.802112 95.993856 43.843584 24.037376 24.745984 40.1408 62.232576 40.1408 99.715072l0 400.160768c0 36.755456-16.101376 70.7072-40.1408 95.455232-24.748032 24.016896-58.957824 39.579648-95.711232 39.579648-10.622976 0-19.236864-8.476672-19.236864-19.0976 0-9.887744 8.419328-18.364416 19.027968-18.364416 26.863616 0 45.568-11.32544 63.240192-29.00992 17.672192-17.657856 23.668736-41.699328 23.668736-68.564992L849.922048 274.630656c0-26.865664-6.017024-49.321984-23.699456-67.004416C808.56064 189.943808 789.803008 180.224 762.937344 180.224L243.283968 180.224c-26.865664 0-47.98464 9.719808-65.665024 27.40224C159.956992 225.31072 151.552 247.764992 151.552 274.630656l0 400.160768c0 26.863616 8.404992 54.85568 26.064896 72.538112C195.299328 765.014016 216.418304 780.288 243.283968 780.288l332.302336 0 0 0c5.65248 0 11.302912-1.828864 14.845952 3.090432L677.38624 895.367168z"
                    p-id="10850" fill="#22c958"></path>
                  <path
                    d="M318.230528 444.30336c25.452544 0 45.959168 21.215232 45.959168 46.667776s-20.508672 45.961216-45.959168 45.961216c-25.454592 0-45.950976-20.51072-45.950976-45.961216S292.775936 444.30336 318.230528 444.30336L318.230528 444.30336z"
                    p-id="10851" fill="#22c958"></path>
                  <path
                    d="M507.701248 444.30336c25.454592 0 45.963264 21.215232 45.963264 46.667776s-20.51072 45.961216-45.963264 45.961216c-25.452544 0-45.94688-20.51072-45.94688-45.961216S482.250752 444.30336 507.701248 444.30336L507.701248 444.30336z"
                    p-id="10852" fill="#22c958"></path>
                  <path
                    d="M697.186304 536.932352c25.45664 0 45.950976-20.51072 45.950976-45.961216s-20.494336-46.667776-45.950976-46.667776c-25.452544 0-46.665728 21.215232-46.665728 46.667776S671.73376 536.932352 697.186304 536.932352L697.186304 536.932352z"
                    p-id="10853" fill="#22c958"></path>
                </svg>
              </div>
              <div style="flex:1;line-height: 24px;" class="pepleattr">
                <div>留言总数</div>
                <div>{{ PageData.messageCount }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!-- footer -->
    <el-row :gutter="12">
      <el-col :span="10">
        <div>
          <el-card class="dash-title">近期评论</el-card>
          <el-card class="massege-pannel">暂无数据</el-card>
        </div>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <span class="dash-title">新注册用户</span>
        </el-card>
        <el-card shadow="always" :body-style="{ padding: '20px' }">
          <div class="dash-box">
            <div class="user-list">
              <ul>
                <li v-for="user in PageData.regUsers" :key="user._id">
                  <div class="random-logo">
                    <div v-if="(user.logo).indexOf('defaultlogo.png') > 0">
                      <span class="randomLogo" :style="{ backgroundColor: renderLogo() }">{{
                          (user.userName).substring(0, 1).toLocaleUpperCase()
                      }}</span>
                    </div>
                    <div v-else>
                      <img :src="user.logo" :alt="user.userName" :title="user.userName" />
                    </div>
                  </div>
                  <label for="">{{ user.userName }}</label>
                </li>
              </ul>
            </div>
          </div>
        </el-card>

      </el-col>
      <el-col :span="8">
        <el-card shadow="always" :body-style="{ padding: '20px' }">
            <div class="el-card__header" style="width:328px;height: 220px;">
              <div class="box-card-header"><img style="width:300px;height: 200px;"
                  src="https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png">
              </div>
            </div>
            <div class="el-card__body">
              <div style="position: relative;">
                <div class="pan-item panThumb">
                  <div class="pan-info">
                    <div class="pan-info-roles-container"></div>
                  </div>
                  <img src="https://cdn.html-js.cn/cms/upload/images/defaultlogo.png" class="pan-thumb">
                </div>
                <a href="#" class="link-mallki mallki-text">
                  <span data-letters="doracms"></span><span data-letters="doracms"></span></a>
                <div class="info-pannel">
                  <ul>
                    <li><label>上次登录时间：</label>
                      {{ date }}
                    </li>
                    <li><label>上次登录IP：</label>
                      {{ ip }}
                    </li>
                    <li><label>我的权限：</label>
                      <button @click="lookSource">
                        查看
                      </button>
                    </li>
                  </ul>
                </div>
              </div>
            </div>       
        </el-card>

      </el-col>
    </el-row>
    <!-- //三級分類 -->
    <el-dialog :visible.sync="dialogVisible" width="50%">
      <div class="resource-details">
        <div v-if="PageData.resources && PageData.resources.length > 0">
          <div v-for="cate in PageData.resources" :key="cate._id">
            <!-- 主分类 -->
            <h3 class="cate-title">{{ cate.comments }}</h3>
            <div v-for="(childCate, index) in cate.children" :key="'x_' + index">
              <!-- 子类 -->
              <el-row :gutter="10" style="margin:5px 0;">
                <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
                  <h4 class="child-cate-title">{{ childCate.comments }}</h4>
                </el-col>
                <el-col :xs="20" :sm="20" :md="20" :lg="20" :xl="20">
                  <ul class="resource-list">
                    <li v-for="(resource, index) in childCate.children" :key="'r_' + index">
                      <svg v-show="resource.hasPower" t="1656429047175" class="icon" viewBox="0 0 1024 1024"
                        version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1283" width="12" height="12">
                        <path
                          d="M512 0C228.266667 0 0 228.266667 0 512c0 283.733333 228.266667 512 512 512 283.733333 0 512-228.266667 512-512C1024 228.266667 795.733333 0 512 0zM832 384 492.8 723.2C469.333333 746.666667 426.666667 746.666667 403.2 723.2L192 512c0 0-32-32 0-64s64 0 64 0l192 192 320-320c0 0 32-32 64 0S832 384 832 384z"
                          p-id="1284" fill="#1afa29"></path>
                      </svg>
                      <svg v-show="!resource.hasPower" t="1656429174775" class="icon" viewBox="0 0 1024 1024"
                        version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4121" width="12" height="12">
                        <path
                          d="M512 29.538462a482.461538 482.461538 0 1 0 482.461538 482.461538A482.461538 482.461538 0 0 0 512 29.538462z m55.138462 206.178461l-15.753847 354.461539h-78.76923l-15.753847-354.461539zM512 788.283077a68.923077 68.923077 0 1 1 68.923077-68.923077 68.923077 68.923077 0 0 1-68.923077 68.923077z"
                          p-id="4122" fill="#d81e06"></path>
                      </svg>
                      {{ resource.comments }}
                    </li>
                  </ul>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
        <!-- <div v-else>{{ $t('main.noMessages') }}</div> -->
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getSiteBasicInfo } from '@/api/dashboard'
import { mapGetters } from 'vuex'
import { renderTreeData } from '@/utils/auth'
export default {
  name: 'Dashboard',
  data() {
    return {
      dialogVisible: false,
      green: { color: "#13CE66" },
      red: { color: "#FF4949" },
      PageData: {
        adminUserCount: '',
        contentCount: '',
        regUserCount: '',
        messageCount: '',
        messages: [],
        regUsers: [],
        loginLogs: [],
        resources: []
      },
      colorList: [
        "#409EFF",
        "#67C23A",
        "#E6A23C",
        "#F56C6C",
        "#909399",
        "#409EFF",
        "#67C23A",
        "#E6A23C",
        "#F56C6C",
        "#909399"
      ],
      ip: '',
      date: ''
    }

  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  mounted() {
    //獲取頁面數據
    this.getSiteBasic()

  },
  methods: {
    async getSiteBasic() {
      let result = await getSiteBasicInfo()
      console.log(result, '222');
      this.PageData = { ...result.data }
      if (this.PageData.loginLogs && this.PageData.loginLogs[0]) {
        this.PageData.loginLogs.forEach((item) => {
          console.log(item);
          this.date = item.date
          this.ip = item.logs.split(":")[1]
        })
      }
      this.PageData.resources = renderTreeData(result.data.resources)
      console.log(this.PageData.resources);
    },
    renderLogo() {
      let count = Math.round(Math.random() * 6 + 1);
      return this.colorList[count];
    },
    lookSource() {
      this.dialogVisible = true
      //獲取頁面數據
      this.getSiteBasic()
    }
  },

}
</script>

<style lang="scss" scoped>
.random-logo {
  .randomLogo {
    color: #ffffff;
    border-radius: 50%;
    max-width: 75%;
    height: 40px;
    width: 40px;
    display: block;
    position: absolute;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    box-shadow: 0px 1px 1px #aaa;
  }

  img {
    border-radius: 50%;
    max-width: 75%;
    height: 40px;
    width: 40px;
    position: absolute;
    box-shadow: 0px 1px 1px #aaa;
  }
}

.user-list {
  padding: 0;

  ul {
    padding: 0;
    margin: 0;

    li {
      display: block;
      position: relative;
      width: 100%;
      border-bottom: 1px solid #eee;
      padding: 15px;

      label {
        height: 40px;
        line-height: 40px;
        margin-left: 50px;
      }
    }
  }
}

.dashboard-container {
  padding: 0 20px;

  .dashboard {
    margin: 10px;
  }

  .body {
    background-color: #f5f7f9;
  }



  .text1 {
    color: #b4bccc;
    font-size: 12px;
    font-family: Helvetica;
    // margin-top: 20px;
    // margin-left: 15px;

  }

  .center {
    margin-bottom: 18px;

    .card1 {
      // display: flex;
      margin-top: 20px;
    }
  }

  .dash-title {
    font-size: 16px;
    color: rgba(0, 0, 0, .45);
    margin: 0;
    // padding: 15px;
    font-weight: 400;
    border-bottom: 1px solid #eee;
    background: rgba(0, 0, 0, .003);
  }

  .message-pannel {
    font-size: 14px;
    color: #666;
  }

  //footer图片
  .card__header{

  .box-card-header {
    overflow: hidden;

    img {
      cursor: pointer;
      transition: all 0.6s;
    }

    img:hover {
      transform: scale(1.2);
    }
  }
  }

  .pan-item {
    position: relative;

    img {
      width: 60px;
      height: 60px;
      position: absolute;
      top: -70px;
      left: 20px;
      background-color: #fff;
      background-size: 220px 220px;
      background-size: 220px 220px;
      border-radius: 110px;
      border-radius: 110px;
      transition: -webkit-transform 2s ease-out;
    }

    img:hover {
      transform: rotateZ(360deg);
      transform: rotateZ(360deg);
    }
  }

  .info-pannel {
    list-style-type: none;
    line-height: 30px;
    color: rgba(0, 0, 0, .45);
    font-size: 13px;

    ul li {
      list-style: none;
    }
  }

}

.resource-details {
  margin-top: -30px;

  h3 {
    font-size: 14px;
    margin: 10px auto;
    border-bottom: 1px solid #edf2fc;
  }

  h4 {
    font-size: 12px;
    margin: 0;
    font-weight: 500;
  }

  .resource-list {
    margin: 0;
    padding: 0;

    li {
      display: inline-block;
      list-style-type: none;
      font-size: 12px;
      margin-right: 10px;
    }
  }
}
</style>
